<template>
  <div id="main">
    <form action="" class="form">
      <div class="form-head">
        <h2>登录</h2>
        <p>
          还没有账号？
          <router-link active-class="active" to="/pagelogin/gregister">
            立即注册
          </router-link>
        </p>
      </div>
      <div class="form-body">
        <el-form :model="loginForm" :rules="loginFormRulest" ref="loginFormRef">
          <!-- 用户名 -->
          <el-form-item label="" prop="username">
            <div class="ui-input" ref="userStyle">
              <el-input
                class="abc"
                v-model="loginForm.username"
                @focus="ClassUser('userStyle', 0)"
                @blur="ClassUser('userStyle', 1)"
                placeholder="用户名"
              ></el-input>
            </div>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="" prop="password">
            <div class="ui-input" ref="pwdStyle">
              <el-input
                type="password"
                v-model="loginForm.password"
                @focus="ClassUser('pwdStyle', 0)"
                @blur="ClassUser('pwdStyle', 1)"
                placeholder="密码"
                show-password
              ></el-input>
            </div>
          </el-form-item>
        </el-form>

        <p class="forget-password">
          <a href="javascript:;">忘记密码？</a>
        </p>
        <button class="ui-button ui-button--primary" @click="login">
          登录
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import "../css/style.css";
import { checkUser } from "@/api";
export default {
  name: "Glogin",
  props: ["username", "password"],
  data() {
    return {
      // 登入表单的数据绑定
      loginForm: {
        username: this.username || "",
        password: this.password || "",
      },
      // 表单的验证规则
      loginFormRulest: {
        username: [
          { required: true, message: "*请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "*请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 处理输入框获取焦点样式问题
    ClassUser(id, type) {
      if (!type) {
        this.$refs[id].className += " focus";
      } else {
        this.$refs[id].className = this.$refs[id].className.replace(
          " focus",
          ""
        );
      }
    },
    // 登入按钮事件
    login($event) {
      // 阻止表单默认提交
      $event.preventDefault();
      this.$refs.loginFormRef.validate(async (valid) => {
        // 判断验证是否通过
        if (!valid) {
          return false;
        }
        // 触发写好的接口
        let res = await checkUser(this.loginForm);
        // 登入失败清空输入框
        if (res.meta.status != 200) {
          this.loginForm.username = "";
          this.loginForm.password = "";
          this.$notify({
            title: "提示",
            message: "不断尝试你就会登入成功！",
            duration: 1000,
          });
          return this.$message.error("登入失败！");
        }
        // 登入成功保存数据并跳转路由
        this.$message.success("登入成功！");
        window.sessionStorage.setItem("token", JSON.stringify(res.data));
        this.$router.push("/pageindex/goodsshow");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  margin-top: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 5px;
}
.ui-input {
  padding: 0;
}
</style>
